<template>
	<!-- 对div的状态进行判断，如果是被选中的状态就加active属性，否则不加active属性 -->
	<!-- 对应的class中active结果为true或false，则会渲染被选中或者未被选中的状态，也就是Item.vue中的active样式 -->
	<div class="item" :class="{active:isActive}" @click="handleClick">
		<!-- 插槽元素 -->
		<slot></slot>
	</div>
</template>

<script>
	export default{
		props:{
			isActive:{
				type:Boolean,  //约束该属性的类型必须是布尔型
				// required:true  //约束该属性必须穿第一个属性
				default:false
			}
		},
		methods:{
			handleClick(){
				// 通过这个函数来通知父组件,也就是子组件抛出的数据
				// $emit("注册的函数名称",携带的值)
				this.$emit("active")
			}
		}
	}
	
</script>


	<!-- 可能会出现类名冲突的问题 -->
	<!-- style中加上scoped就能元素在渲染时候随机生成一个类名，确保类名唯一性 -->
<style scoped>
	/* .active是选中的状态，背景颜色变为#e7e7e7 */
	.active{
		background: #e7e7e7;
	}
	.item{
		cursor: pointer;/* 鼠标放到元素上时，鼠标会变成一个小手的形状 */
		width: 100%;
		height: 100%;
		transition: 0.3s;/* transition使颜色变化的速度变缓，不会显得生硬 */
	}
	/* 给定一个鼠标放在元素上就显示不同颜色的效果 ：hover*/
	.item:hover{
		background: #f4f4f4;
	}
</style>
